<template>
  <div>
    <v-chart class="chart" :option="option" />
  </div>
</template>

<script setup>
import { defineProps, watch, ref } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { GridComponent } from "echarts/components";
import VChart from "vue-echarts";

use([CanvasRenderer, BarChart, GridComponent]);

const props = defineProps({
  chartData: Array,
})

const option = ref({})

watch(
  () => props.chartData,
  (val) => {
    init();
  }
);

init()
function init() {
  option.value = getOption();
}

function getOption() {
  let xData = [];
  let yData = [];
  props.chartData.forEach((item) => {
    xData.push(item.theDate);
    yData.push(item.num);
  });

  return {
    color: ["#409eff"],
    grid: {
      bottom: 50,
      right: 50,
      top: '5%',
      left: 40,
    },
    xAxis: {
      type: "category",
      data: xData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        label: {
          show: true,
          position: "top",
        },
        data: yData,
        type: "bar",
      },
    ],
  };
}
</script>
<style scoped>
.chart {
  height: 400px;
  /* width: 1000px; */
}
</style>
